<style scoped lang="less">
  .s-nav-btn{
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    .nav-btns{
      margin-right: 3px;
    }
  }
</style>
<template>
  <div class="s-nav-btn">
    <Button v-for="item in navbtnData" :key="item.id" :disabled="item.disable" @click="openModal(item.id)" class="nav-btns">{{item.name}}</Button>
    <Modal v-for="item in modalCon" title="标题" v-model="item.modalCon" class-name="vertical-center-modal">
        <p>Content of dialog</p>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
    </Modal>
  </div>
</template>
<script>
export default {
  name: 'sNav',
  props: ['navbtnData', 'modalCon'],
  data () {
    return {
    }
  },
  methods: {
    openModal (s) {
      this.modalCon[s].modalCon = true;
    }
  }
}
</script>